首先要安裝 react router dom： npm install react-router-dom
再來要在專案中引入 module：

import {
  BrowserRouter,
  Switch,
  Route,
  Link
} from "react-router-dom";

<BrowserRouter>：
包在最外層，被 <BrowserRouter> 包起來的區域都可以使用 react-router-dom 所提供的功能
<HashRouter>：
包在最外層做使用，路徑會有 #
<Switch>：
只有第一個符合 URL 的元件會被 render
<Route>：
只要符合目前的 URL 都會 render 指定的 UI
<Link>：
在 React 裡面的 <Link to=""></Link> 代表 HTML 的 <a href=""></a>
<Redirect>：
重新定向

例如：
有個頁面的 Navbar 有 Home 和 About，Home 和 Nav 有對應的文字
App.js

// App.js
import Home from "./Home";
import Nav from "./Nav";
import About from "./About";
import { BrowserRouter, Switch, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Nav />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

p.s 也可寫成這樣：

<Route path="/" exact component={Home} />
<Route path="/about" component={About} />

• exact 表示路徑完全符合才會 render 該頁面

Nav.js

// Nav.js
import React from "react";
import { Link } from "react-router-dom";

const Nav = () => {
  return (
    <nav>
      <ul>
        <Link to="/">
          <li>Home</li>
        </Link>
        <Link to="/about">
          <li>About</li>
        </Link>
      </ul>
    </nav>
  );
};

export default Nav;

此時點擊 Home 時，網頁上顯示 Home，路徑為 http://localhost:3000/

點擊 About 時，網頁上顯示 About，路徑為 http://localhost:3000/about

而如果我們將 App.js 的 BrowserRouter 改成 HashRouter

//App.js
import { HashRouter, Switch, Route } from "react-router-dom";

function App() {
  return (
    <HashRouter>
      <Nav />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </HashRouter>
  );
}

export default App;

此時點擊 Home，路徑會變成 http://localhost:3000/#/

點擊 About 時，路徑會變成 http://localhost:3000/#/about